<template>
  <el-drawer v-model="drawerVisible" title="终端管理" class="mgr-drawer" size="80%" :z-index="1200">
    <div class="panel-sensor">
      <span class="title">物理传感器</span>
      <div>
        <el-button type="primary" plain @click="subscribeTerminalInfo">一键同步</el-button>
        <el-button type="success" plain @click="openForm('create')">手动添加</el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="sensorId" label="传感器ID" />
      <el-table-column prop="sensorType" label="物理传感器类型" />
      <el-table-column prop="outputSignalType" label="输出信号类型" />
      <el-table-column prop="sensorSpecs" label="物理传感器规格参数" />
      <el-table-column prop="sensorParams" label="物理传感器硬件参数" />
      <el-table-column prop="sensorConfig" label="物理传感器配置项" />
      <el-table-column label="操作" align="center" min-width="50px">
        <template #default="scope">
          <!-- <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['vmiot:terminal-device:update']"
          >
            编辑
          </el-button> -->
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['vmiot:terminal-device:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>

  <PhysicalSensorForm ref="formRef" @success="getList(terminalDeviceId)" />
</template>

<script setup lang="ts">
import { PhysicalSensorApi } from '@/api/vmiot/physicalsensor'
import { TerminalDeviceApi } from '@/api/vmiot/terminaldevice'
import PhysicalSensorForm from './PhysicalSensorForm.vue'
const drawerVisible = ref(false)
const tableData = ref([])
const terminalDeviceId = ref()
const formRef = ref()
const { t } = useI18n() // 国际化

const message = useMessage() // 消息弹窗

const subscribeTerminalInfo = async () => {
  await TerminalDeviceApi.syncPhysicalSensor(terminalDeviceId.value)
  message.success('同步成功')
  drawerVisible.value = false
}

const getList = async (terminalDeviceId) => {
  try {
    const data = await PhysicalSensorApi.getPhysicalSensorPage({
      pageNo: 1,
      pageSize: 100,
      terminalDeviceId: terminalDeviceId
    })
    tableData.value = data.list
  } finally {
  }
}

const open = async (id?: number) => {
  drawerVisible.value = true
  terminalDeviceId.value = id
  getList(id)
  //   dialogTitle.value = t('action.' + type)
  //   formType.value = type
  //   resetForm()
  //   // 修改时，设置数据
  //   if (id) {
  //     formLoading.value = true
  //     try {
  //       formData.value = await TerminalDeviceApi.getTerminalDevice(id)
  //     } finally {
  //       formLoading.value = false
  //     }
  //   }
}

const openForm = (type: string, id?: number) => {
  formRef.value.open(type, terminalDeviceId.value, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await PhysicalSensorApi.deletePhysicalSensor(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList(terminalDeviceId.value)
  } catch {}
}

defineExpose({ open })
</script>

<style lang="scss">
.mgr-drawer {
  .el-drawer__header {
    margin-bottom: 20px;
  }

  .el-drawer__body {
    border-top: 1px solid #e0e0e0;
  }
}

.panel-sensor {
  display: flex;
  align-items: center;
  background-color: rgb(243.9, 244.2, 244.8);
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 4px;
  .title {
    margin-right: 20px;
  }
}
</style>
